<template>
	<view class="rows" v-if="xcxStatus != 0">
		<wd-row gutter="0">
			<wd-col :span="12">
				<view class="latest-consultation">
					<image class="latest-consultation-bg"
						src="https://lvshi.haidanet.com/uni-static/lawyer/img/index/latest-consultation.png"></image>
					<view class="title">最新咨询</view>
					<view class="list">
						<view class="item" @click="goCase" v-for="(item, index) in orderList" :key="index">
							<view class="time">{{ item.create_time }}</view>
							<view class="content">
								<view class="text text-ellipsis">{{ item.anjian_name }}</view>
							</view>
						</view>
					</view>
				</view>
			</wd-col>
			<wd-col :span="12">
				<view class="card major-case" @click="tips">
					<view class="title">
						大案
						<text>直播</text>
					</view>
					<view class="direct-seeding">
						<image class="bg"
							src="https://lvshi.haidanet.com/uni-static/lawyer/img/index/26cff95b05b6ffe78b1eb8e57b3e450a4420f6ab.jpg">
						</image>
					</view>
					<view class="lawyer">
						<image class="avatar" src="@/static/logo.png"></image>
						<view class="info">
							<view class="title text-ellipsis">关于非法被辞退的案件分析</view>
							<view class="name text-ellipsis">王律师</view>
						</view>
					</view>
				</view>
				<view class="mediate" @click="tips">
					<image class="bg" src="https://lvshi.haidanet.com/uni-static/lawyer/img/index/mediate-bg.png">
					</image>
					<image class="icon" src="https://lvshi.haidanet.com/uni-static/lawyer/img/index/litigation.png">
					</image>
					<view class="text">讼 前 调 解 中 心</view>
				</view>
			</wd-col>
		</wd-row>
	</view>
</template>

<script lang="ts">
	import { computed, defineComponent, ref } from 'vue';
	import { getCaseORderList } from '@/api/index';
	import { onShow } from '@dcloudio/uni-app';
	import { useAppStore } from '@/store';
	import useRouter from '@/hooks/useRouter.ts';
	export default defineComponent({
		name: 'Menu',
		setup(props, ctx) {
			const router = useRouter();
			const orderList = ref([]);
			const goCase = () => {
				// 跳转到我的案件页面，需要根据实际情况进行调整。
				router.switchTab('/pages/order/order');
			}
			const goPage = (url : string, type = 'push') => {
				if (type === 'push') {
					router.push(url);
				} else if (type === 'tab') {
					router.switchTab(url);
				}
			};
			const appStore = useAppStore();
			const xcxStatus = computed(() => appStore.config.xcx_status)
			const tips = () => {
				// uni.showToast({ title: '请先登录', icon: 'none' });
				uni.$wdToast.error('暂未开放');
			};
			onShow(() => {
				getCaseORderList({
					page: 1,
					status: 1,
					pagesize: 4
				}).then((res) => {
					console.log(res); // 打印任务列表数据
					orderList.value = res.list;
				});
			});
			return {
				xcxStatus,
				goPage,
				goCase,
				tips,
				orderList
			};
		}
	});
</script>
<style lang="less">
	.rows {
		margin-top: 24rpx;

		.latest-consultation {
			position: relative;
			width: calc(100% - 32rpx);
			padding: 24rpx;

			&-bg {
				position: absolute;
				left: -10rpx;
				top: -10rpx;
				height: 540rpx;
				width: 98%;
			}

			>.title {
				position: relative;

				font-family: PingFang;
				font-weight: bold;
				font-size: 33rpx;
				color: #ffffff;

				&::after {
					position: absolute;
					left: 0;
					bottom: -19rpx;
					content: ' ';
					display: inline-block;
					width: 74rpx;
					height: 3rpx;
					background: #ffffff;
					border-radius: 2rpx;
				}
			}

			.list {
				position: relative;
				top: 40rpx;
				width: calc(100% - 24rpx);

				>.item {
					>.time {
						font-family: PingFang;
						font-weight: 400;
						font-size: 24rpx;
						color: #ffffff;
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;

						&::before {
							margin-right: 20rpx;
							content: ' ';
							display: inline-block;
							width: 12rpx;
							height: 12rpx;
							background: #ffffff;
							border-radius: 50%;
						}
					}

					>.content {
						display: flex;
						align-items: center;
						width: calc(100%);
						margin-bottom: 10rpx;

						.text {
							width: calc(100% - 40rpx);
							height: 39rpx;
							background: #ffffff;
							border-radius: 19rpx;
							font-family: PingFang;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							padding: 0 10rpx;
							line-height: 39rpx;
						}

						&::before {
							margin-right: 10rpx;
							margin-left: 5rpx;
							content: ' ';
							display: inline-block;
							width: 1rpx;
							height: 48rpx;
							background: #ffffff;
						}
					}
				}
			}
		}

		.major-case {
			padding: 25rpx 10rpx;
			width: calc(100% - 15rpx - 15rpx);

			>.title {
				font-family: PingFang;
				font-weight: bold;
				font-size: 33rpx;
				color: #000000;
				position: relative;

				text {
					color: #c91c1f;
				}

				&::after {
					position: absolute;
					left: 0;
					bottom: -19rpx;
					content: ' ';
					display: inline-block;
					width: 129rpx;
					height: 3rpx;
					background: #c91c1f;
					border-radius: 2rpx;
				}
			}

			.direct-seeding {
				position: relative;
				margin-top: 30rpx;

				>.bg {
					border-radius: 10rpx;
					margin: 10rpx 0;
					width: 100%;
					height: 200rpx;
				}
			}

			.lawyer {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background: #ccc;
				}

				.info {
					width: calc(100% - 80rpx - 20rpx);
					padding-left: 20rpx;

					.title {
						width: calc(100% - 20rpx);
						font-family: PingFang;
						font-weight: bold;
						font-size: 26rpx;
						color: #000000;
					}

					.name {
						width: calc(100% - 20rpx);
						font-family: PingFang;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}

		.mediate {
			margin-top: 15rpx;
			position: relative;

			>.bg {
				width: 100%;
				height: 72.22rpx;
			}

			.icon {
				width: 55rpx;
				height: 55rpx;
				position: absolute;
				left: 30rpx;
				top: 10rpx;
			}

			.text {
				position: absolute;
				left: 100rpx;
				top: 15rpx;
				font-family: PingFang;
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
			}
		}
	}
</style>